<template>
    <div style="padding: 20px;">
        <div class="table-wrap">

            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="敏感词设置" name="first">
                    <el-button size="mini" type="primary" @click="addMinganci">添加敏感词</el-button>
                    <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;"
                        row-key="id" border stripe default-expand-all>
                        <el-table-column prop="name" label="敏感词"></el-table-column>
                        <el-table-column prop="createtime" label="创建时间"></el-table-column>
                        <el-table-column prop="status_ch" label="状态"></el-table-column>

                        <el-table-column prop="opa" label="操作">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.status == 0" @click="jinyong(scope.row.id,1)" type="info"
                                    size="mini" style="width:40px;padding-left:8px;">禁用</el-button>
                                <el-button v-if="scope.row.status == 1" @click="jinyong(scope.row.id,0)" type="primary"
                                    size="mini" style="width:40px;padding-left:8px;">启用</el-button>
                                <el-button @click="del(scope.row.id)" type="danger" size="mini"
                                    style="width:40px;padding-left:8px;">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]" 
                            :page-size="form.pageSize"
                            background layout="total, sizes, prev, pager, next, jumper" :total="form.total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="触发记录" name="second">
                    <!--我的邀约列表-->
                    <el-form :inline="true" ref="form" :model="form" label-width="80px"
                        style=" display: flex;flex-direction: column;">
                        <div>
                            <el-form-item label="敏感词搜索" prop="qunfa_type">
                                <el-select v-model="form.minganci_trigger" placeholder="请选择" size="mini">
                                    <!-- <el-option label="红包" value="1" vf></el-option> -->
                                    <el-option v-for="item in minganci_list" :label="item.name"
                                        :value="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-date-picker size="mini" v-model="form.date" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="search" size="mini">搜索</el-button>

                                <el-button size="mini" @click="resetForm('form')">重置</el-button>
                                <!-- <el-button @click="init()">刷新</el-button> -->
                                <vue-json-excel style="display: inline;margin-left: 10px;"
                                    :data="tableData_trigger_export" :fields="excelFields" name="触发记录.xlsx" type="xlsx">
                                    <el-button size="mini">导出</el-button>
                                </vue-json-excel>
                            </el-form-item>
                            <div v-show="jiankong == 1" style="font-size: 14px;">敏感词监控中...</div>
                            <el-table :data="tableData_trigger" v-loading="loading"
                                style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all>
                                <el-table-column prop="minganci" label="敏感词"></el-table-column>
                                <el-table-column prop="trigger" label="触发者"></el-table-column>
                                <el-table-column prop="createtime" label="消息时间"></el-table-column>
                                <el-table-column prop="content" label="涉及内容"></el-table-column>
                            </el-table>
                            <div class="block">
                                <el-pagination @size-change="handleSizeChange_trigger" @current-change="handleCurrentChange_trigger"
                                    :current-page="form.pageNumber_trigger" :page-sizes="[10, 50, 100, 200]"
                                    :page-size="form.pageSize_trigger"
                                     background  layout="total, sizes, prev, pager, next, jumper" :total="form.total_trigger">
                                </el-pagination>
                            </div>
                        </div>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="监控设置" name="third">
                    <span style="margin-right: 20px;">敏感词监控</span>
                    <el-radio-group v-model="radio" @change="op_jiankong">
                        <el-radio  label="1" >开启</el-radio>
                        <el-radio  label="0" >关闭</el-radio>
                    </el-radio-group>

                    <div style="margin-top: 30px;">
                        <span class="demonstration">监控范围：</span>
                        <el-button type="primary" size="small" @click="chose_yuangong">选择员工</el-button>
                    </div>
					<div class="biaoqian_right_content" style="width: 70%;text-align: left;">
					    <div class="biaoqian_right_content_item">
					        <div class="biaoqian_right_content_item_contnet" >
					            <div class="biaoqian_left_content_content_item_content_title"
									style="font-size: 12px;"
					                v-for="(item2, index2) in jiankong_chose" :key="index2">
					                {{ item2.name }}
					            </div>
					
					        </div>
					    </div>
					</div>
                    <div style="margin-top: 30px;">
                        <span class="demonstration" >预警通知：</span>
                        <el-button type="primary" size="small" @click="chose_yuangong_yujing">选择员工</el-button>
                    </div>
					<div class="biaoqian_right_content" style="width: 70%;">
					    <div class="biaoqian_right_content_item">
					        <div class="biaoqian_right_content_item_contnet">
					            <div class="biaoqian_left_content_content_item_content_title"
									style="font-size: 12px;"
					                v-for="(item2, index2) in yujing_chose" :key="index2">
					                {{ item2.name }}
					            </div>
					
					        </div>
					    </div>
					</div>

                </el-tab-pane>
            </el-tabs>



        </div>

        <el-dialog title="添加敏感词" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="新建敏感词(输入完点击回车键加到列表)" :label-width="formLabelWidth">
                    <el-input v-model="add_ci" autocomplete="off" @keyup.enter.native="handleInputConfirm"></el-input>
                    <el-tag :key="index" v-for=" (tag, index) in add_ci_group" :closable="true"
                        :disable-transitions="false" @close="handleClose(index)" style="margin-left:10rpx;" type="info">
                        {{tag}}
                    </el-tag>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add_ci_queding">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog v-dialogDrag :visible.sync="yuangongopen" width="60%" height="600px" append-to-body title="选择员工">

            <div class="biaoqian_content">
                <!--选择员工-->
                <div class="biaoqian_left_content">
                    <div class="biaoqian_left_content_title">
                        <el-input placeholder="请输入关键字" v-model="addbiaoqianform.title"></el-input>
                        <el-button type="primary" size="mini" @click="querybiaoqian_yuangong">查询</el-button>
                        <el-button size="mini" @click="resetbiaoqian">重置</el-button>
                    </div>
                    <div class="biaoqian_left_content_content">
                        <div class="biaoqian_left_content_content_item" v-for="item in biaoqianlist"
                            :key="item.groups.id">
                            <div class="biaoqian_left_content_content_item_title">{{ item.groups.name }}</div>
                            <div class="biaoqian_left_content_content_item_content2">
                                <div class="biaoqian_left_content_content_item_content" v-for="item2 in item.tags"
                                    :key="item2.id">
                                    <div @click="clickbiaoqian(item.groups, item2)"
                                        :class="item2.click == 1 ? 'biaoqian_left_content_content_item_content_title2' : 'biaoqian_left_content_content_item_content_title'">
                                        {{ item2.name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--已选标签-->
                <div class="biaoqian_right_content">
                    <div>已选 {{ biaoqianlist_hav_count }} <span style="color:red;">点击删除</span></div>
                    <div class="biaoqian_right_content_item">
                        <!-- <div class="biaoqian_right_content_item_top">点击删除</div> -->
                        <div class="biaoqian_right_content_item_contnet">
                            <div @click="clickbiaoqiandel(item2.groups, item2.tags, index2)"
                                class="biaoqian_left_content_content_item_content_title"
                                v-for="(item2, index2) in biaoqianlist_hav" :key="index2">
                                {{ item2.tags.name }}
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="yuangongopen = false" size="small">取 消</el-button>
                <el-button type="primary" @click="submitbiaoqianForm_jiankong" size="small">确
                    定</el-button>
            </div>

        </el-dialog>


        <!--选择  包含的 企业标签  含有标签3  -->
        <el-dialog v-dialogDrag :visible.sync="xuan_biaoqian_open" width="60%" height="600px" append-to-body
            title="选择标签">

            <div class="biaoqian_content">
                <!--选择员工-->
                <div class="biaoqian_left_content">
                    <div class="biaoqian_left_content_title">
                        <el-input placeholder="请输入关键字" v-model="addbiaoqianform2.title"></el-input>
                        <el-button type="primary" size="mini" @click="querybiaoqian_yuangong_yujing">查询</el-button>
                        <el-button size="mini" @click="resetbiaoqian_yujing">重置</el-button>
                    </div>
                    <div class="biaoqian_left_content_content">
                        <div class="biaoqian_left_content_content_item" v-for="item in biaoqianlist_yujing"
                            :key="item.groups.id">
                            <div class="biaoqian_left_content_content_item_title">{{ item.groups.name }}</div>
                            <div class="biaoqian_left_content_content_item_content2">
                                <div class="biaoqian_left_content_content_item_content" v-for="item2 in item.tags"
                                    :key="item2.id">
                                    <div @click="clickbiaoqian_qiye(item.groups, item2)"
                                        :class="item2.click == 1 ? 'biaoqian_left_content_content_item_content_title2' : 'biaoqian_left_content_content_item_content_title'">
                                        {{ item2.name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--已选标签-->
                <div class="biaoqian_right_content">
                    <div>已选 {{ biaoqianlist_hav_count_qiye }}</div>
                    <div class="biaoqian_right_content_item">
                        <div class="biaoqian_right_content_item_top">点击删除</div>
                        <div class="biaoqian_right_content_item_contnet">
                            <div @click="clickbiaoqiandel_qiye(item2.groups, item2.tags, index2)"
                                class="biaoqian_left_content_content_item_content_title"
                                v-for="(item2, index2) in biaoqianlist_hav_qiye" :key="index2">
                                {{ item2.tags.name }}
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="xuan_biaoqian_open = false" size="small">取 消</el-button>
                <el-button type="primary" @click="submitbiaoqianForm_yujing" size="small">确
                    定</el-button>
            </div>

        </el-dialog>


    </div>

</template>


<script>
    import Panle from '@/components/Panle';
    import {
        minganci_getlist,
        jinyong,
        del,
        add_minganci,
        minganci_getlist_trigger,
        minganci_getlist_trigger_export,
        jiankong,
        yujing,
        get_tags,
        linshi,
        linshi1,
        linshi2,
        op_jiankong,
        trigger_chaoshi,
    } from '@/api/scrm/statistics/statistics';

    import {
        queryyuangong,
    } from '@/api/scrm/qunfa/qunfa';


    import PersButton from '@/components/PersButton';
    import {
        hasPermission
    } from '@/common/permission'
    import VueJsonExcel from 'vue-json-excel';
    export default {
        components: {
            Panle,
            PersButton,
            VueJsonExcel,
        },
        data() {
            return {
				jiankong_chose:[],
				yujing_chose:[],
                jiankong:0,
                biaoqianlist_qiye: [],
                biaoqianlist_hav_qiye: [],
                biaoqianlist_hav_count_qiye: 0,
                xuan_biaoqian_open: false,
                addbiaoqianform2: {
                    title: ''
                },

                biaoqianlist: [],
                biaoqianlist_yujing: [],
                biaoqianlist_hav: [],
				biaoqianlist_hav_yujing:[],
                biaoqianlist_hav_count: 0,

                addbiaoqianform: {
                    title: ''
                },
                yuangongopen: false,
                radio: '1',
                value1: '',
                add_ci: '',
                add_ci_group: [],
                dialogFormVisible: false,
                activeName: 'first',
                loading: false,
                tableData: [],
                tableData_trigger: [],
                tableData_trigger_export: [],
                form: {
                    pageSize: 10,
                    pageNumber: 1,
                    total: 0,
                    pageSize_trigger: 10,
                    pageNumber_trigger: 1,
                    total_trigger: 0,
                    date: ''

                },
                jinyong_data: {
                    id: '',
                    type: '',
                },
                formLabelWidth: '120px',
                minganci_list: [],
                excelFields: {
                    "敏感词": "minganci",
                    "触发者": "trigger",
                    "消息时间": "createtime",
                    "涉及内容": "content",
                }
            }
        },
        created() {
            this.init();
            // this.$watch(() => this.$route.path, () => {
            //     console.log('页面的路由是什么-----',this.$route.path);
            //     if (this.$route.path === '/live/invitation') {
            //         // 刷新页面数据的方法
            //         console.log('刷新页面');
            //         this.init();
            //     }
            // });
        },
        activated() {
            // 在页面返回时数据刷新
            console.log('activated');
            this.init();

        },
        methods: {
            hasPermission,
            linshi(){
                // let data= {
                //     'aid':28,
                //     'content':'我们加微吧',
                //     'time':'2024-06-29 16:53:04',
                //     }
                    
                // linshi1(data).then((res) => {
                //    console.log('linshi-------------',res)
                // })
                let data= {
                    'aid':'ShiNuBi',//员工的userid
                    'external_userid':'wmtj9NNgAAF4fV_qtQkDgQJdJqR3TVdA',//客户的 id
                    'type':'1',//1文本  2 音频  3 视频
                    'content':'五分钟没有回复',//触发敏感词的内容
                    'date_time':'2024-06-29 16:53:04',//触发敏感词的时间
                    }
                trigger_chaoshi(data).then((res) => {
                   console.log('linshi-------------',res)
                })
                
            },
            linshi1(){
                let data= {
                    'aid':28,
                    'content':'我们加微吧',
                    'time':'2024-06-29 16:53:04',
                    }
                    
                linshi1(data).then((res) => {
                   console.log('linshi-------------',res)
                })
            },

            linshi2(){
                let data= {
                    'aid':28,
                    'content':'我们加微吧',
                    'time':'2024-06-29 16:53:04',
                    }
                    
                linshi2(data).then((res) => {
                   console.log('linshi-------------',res)
                })
            },
           
            init() {
                this.loading = true;
                // console.log('init开始:', this.form);
                minganci_getlist(this.form).then((res) => {
                    console.log('5656556s',res.data.set_info.jiankong);
                    this.tableData = res.data.list;
                    this.minganci_list = res.data.list;
                    this.form.total = res.data.list_num
                    this.radio = res.data.set_info.jiankong
                    this.jiankong = res.data.set_info.jiankong
                    this.jiankong_chose = res.data.jiankong_info
                    this.yujing_chose = res.data.yujing_info
                    this.loading = false;
                })
                minganci_getlist_trigger(this.form).then((res) => {
                    console.log(res);
                    this.tableData_trigger = res.data.list;
                    this.form.total_trigger = res.data.list_num
                    this.loading = false;
                })
                minganci_getlist_trigger_export(this.form).then((res) => {
                    console.log(res);
                    this.tableData_trigger_export = res.data.list;
                    this.loading = false;
                })
                
                // queryyuangong(this.addbiaoqianform).then((res) => {
                //     console.log(res);
                //     this.biaoqianlist = res.data.data;
                // })

                get_tags().then((res) => {
                    if (res.data.tags) {
                        this.biaoqianlist_hav = res.data.tags
                    }
                    if (res.data.tags2) {
                        this.biaoqianlist_hav_qiye = res.data.tags2
                    }
                })

            },
			resetForm(){
				this.form.minganci_trigger = ''
				this.init()
			},
            op_jiankong(e){
                
                op_jiankong(e).then((res) => {
                    console.log(res);
                    if(res.data.flag){
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                })
               
            },
            clickbiaoqian_qiye(group, tag) {
                let a = {
                    groups: group,
                    tags: tag
                };

                if (this.biaoqianlist_hav_qiye.length > 0) {
                    var b = true;
                    this.biaoqianlist_hav_qiye.forEach(element => {

                        if (a.tags.tagid == element.tags.tagid) {
                            b = false;
                        }
                    });
                    if (b) {
                        this.biaoqianlist_hav_qiye.push(a);
                    }
                } else {
                    this.biaoqianlist_hav_qiye.push(a);
                }


                this.biaoqianlist_hav_count_qiye = this.biaoqianlist_hav_qiye.length;
                this.biaoqianlist_qiye[group.groupid]['tags'][tag.tagid].click = 1;
                console.log(this.biaoqianlist_qiye[group.groupid]);
            },
            clickbiaoqiandel_qiye(group, tag, index) {

                this.biaoqianlist_hav_qiye.splice(index, 1);
                this.biaoqianlist_hav_count_qiye = this.biaoqianlist_hav_qiye.length;
                this.biaoqianlist_qiye[group.groupid]['tags'][tag.tagid].click = 0;

            },
            clickbiaoqian(group, tag) {
                let a = {
                    groups: group,
                    tags: tag
                };

                if (this.biaoqianlist_hav.length > 0) {
                    var b = true;
                    this.biaoqianlist_hav.forEach(element => {

                        if (a.tags.tagid == element.tags.tagid) {
                            b = false;
                        }
                    });
                    if (b) {
                        this.biaoqianlist_hav.push(a);
                    }
                } else {
                    this.biaoqianlist_hav.push(a);
                }


                this.biaoqianlist_hav_count = this.biaoqianlist_hav.length;
                this.biaoqianlist[group.groupid]['tags'][tag.tagid].click = 1;
                // console.log(this.biaoqianlist[group.groupid]);
            },
            clickbiaoqiandel(group, tag, index) {

                this.biaoqianlist_hav.splice(index, 1);
                this.biaoqianlist_hav_count = this.biaoqianlist_hav.length;
                this.biaoqianlist[group.groupid]['tags'][tag.tagid].click = 0;

            },
            submitbiaoqianForm_jiankong() {

                let tags = [];
                let tags2 = [];
                let tags3 = [];
                let tags4 = [];

                this.biaoqianlist_hav.forEach(element => {
                    tags.push(element.tags.tagid);
                });


                let data_yuangong = {
                    "tags": tags,
                    "tagss": this.biaoqianlist_hav,

                }
                console.log('我是data333333333331', this.biaoqianlist_hav);
                jiankong(data_yuangong).then((res) => {
                    console.log(res.code);
                    console.log(res.data.flag);
					if (res.data.flag == 101) {
					    this.$message({
					        message: '接口请求次数过多,请一分钟后重试',
					        type: 'error'
					    });
					}else{
					    this.$message({
					        message: '操作成功',
					        type: 'success'
					    });
					}
                    this.yuangongopen = false;
                });
            },
            submitbiaoqianForm_yujing() {

                let tags = [];
                let tags2 = [];
                let tags3 = [];
                let tags4 = [];

                //含有标签
                this.biaoqianlist_hav_qiye.forEach(element => {
                    tags2.push(element.tags.tagid);
                });

                let data_yuangong = {
                    "tags2": tags2,
                    "tags22": this.biaoqianlist_hav_qiye,
                }
                console.log('我是data333333333331', this.biaoqianlist_hav_qiye);
                yujing(data_yuangong).then((res) => {
                    console.log(res);
					this.$message({
					    message: '操作成功',
					    type: 'success'
					});
                    this.xuan_biaoqian_open = false;
                });
            },

            search() {
                console.log('我是表单子', this.form)
                minganci_getlist_trigger(this.form).then((res) => {
                    console.log(res);
                    this.tableData_trigger = res.data.list;
                    this.form.total_trigger = res.data.list_num
                    this.loading = false;
                })
                minganci_getlist_trigger_export(this.form).then((res) => {
                    console.log(res);
                    this.tableData_trigger_export = res.data.list;
                    this.loading = false;
                })
            },
            querybiaoqian_yuangong() {
                console.log('点击员工查询名字', this.addbiaoqianform)
                queryyuangong(this.addbiaoqianform).then((res) => {
                    console.log(res);
                    this.biaoqianlist = res.data.data;
                })
            },
			querybiaoqian_yuangong_yujing() {
			    console.log('点击员工查询名字', this.addbiaoqianform2)
			    queryyuangong(this.addbiaoqianform2).then((res) => {
			        console.log(res);
			        this.biaoqianlist_yujing = res.data.data;
			    })
			},
            resetbiaoqian() {
                this.addbiaoqianform = {
                    title: ''
                };
				// this.biaoqianlist_hav = []
				queryyuangong(this.addbiaoqianform).then((res) => {
				    console.log(res);
				    this.biaoqianlist = res.data.data;
				})
                // this.init();
            },
			resetbiaoqian_yujing() {
			    this.addbiaoqianform2 = {
			        title: ''
			    };
				// this.biaoqianlist_hav_qiye = []
				queryyuangong(this.addbiaoqianform2).then((res) => {
				    console.log('888888',res);
				    this.biaoqianlist_yujing = res.data.data;
				})
			    // this.init();
			},
            chose_yuangong() {
                this.yuangongopen = true;
            },
            chose_yuangong_yujing() {
                this.xuan_biaoqian_open = true;
            },
            addMinganci() {
                this.dialogFormVisible = true
            },
            handleClick(tab, event) {
                console.log(tab.name);
                if(tab.name == 'third'){
                    queryyuangong(this.addbiaoqianform).then((res) => {
                        console.log(res);
                        this.biaoqianlist = res.data.data;
                        this.biaoqianlist_yujing = res.data.data;
                    })
                }
            },
            del(e) {
                 this.loading = true;
                del(e).then((res) => {
                    console.log(res.data.flag);
                    if (res.data.flag == 101) {
                        this.$message({
                            message: '接口请求次数过多,请一分钟后重试',
                            type: 'error'
                        });
                    }else{
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                    this.loading = false;
                    this.init();
                })
            },
            jinyong(e, p) {
                this.loading = true;
                this.jinyong_data.id = e
                this.jinyong_data.type = p
                jinyong(this.jinyong_data).then((res) => {
                    console.log(res.data.flag);
                    if (res.data.flag) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                    this.init();
                    this.loading = false;
                })
            },
            handleClose(index) {
                console.log('我是第几个', index)
                this.add_ci_group.splice(index, 1);
            },
            //新建词儿的数组加添加数据 
            handleInputConfirm() {
                this.add_ci_group.push(this.add_ci)
                this.add_ci = ''
                console.log(this.add_ci_group)
            },
            add_ci_queding() {
                if(this.add_ci_group.length == 0){
                    this.$message({
                        message: '请添加数据以后再提交',
                        type: 'error'
                    });
                    this.loading = false;
                    return
                }
                
                this.dialogFormVisible = false
                this.loading = true;
               
                add_minganci(this.add_ci_group).then((res) => {
                    console.log(res);
                    if(res.data.flag == 101){
                        this.$message({
                            message: '接口请求次数过多,请一分钟后重试',
                            type: 'error'
                        });
                    }else{
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                    
                    this.init()
                    this.add_ci_group = []
                    this.loading = false;
                })

            },
            handleSizeChange: function(e) {
                console.log(e);
                this.form.pageSize_trigger = e;
                this.init();
            },
            handleCurrentChange: function(e) {
                console.log(e);
                this.form.pageNumber_trigger = e;
                this.init();
            },
            
            
            handleSizeChange_trigger: function(e) {
                console.log(e);
                this.form.pageSize_trigger = e;
                this.init();
            },
            handleCurrentChange_trigger: function(e) {
                console.log(e);
                this.form.pageNumber_trigger = e;
                this.init();
            },


        }
    }
</script>


<style lang="scss" scoped>
    .scroll-container {
        display: flex;
        margin-top: 10px;
        width: 100%;
        /* 设置容器宽度 */
        overflow-x: auto;
        /* 使得当内容宽度超过容器宽度时可以横向滚动 */
    }

    .content {
        display: flex;
        white-space: nowrap;
        /* 防止内容换行 */
        padding: 5px;
    }

    .line {
        width: 100%;
        height: 20px;
    }

    .plan_content {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .plan_content_item {
        /* width: 200px; */
        height: 120px;
        border-width: 1px;
        border-color: rgb(245, 247, 251);
        border-style: solid;
        background-color: rgb(245, 247, 251);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;
        padding: 10px;
    }

    .plan_content_item2 {
        /* width: 200px; */
        height: 120px;
        border-width: 1px;
        border-color: blue;
        border-style: solid;
        background-color: rgb(245, 247, 251);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;
        padding: 10px;
    }

    .plan_content_item3 {
        /* width: 200px; */
        height: 80px;
        border-width: 1px;
        border-color: rgb(245, 247, 251);
        border-style: solid;
        background-color: rgb(245, 247, 251);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;
        padding: 10px;
    }

    .plan_jishu {
        color: black;
        font-weight: bold;
        font-size: large;
    }

    .live_info_content {
        display: flex;
    }

    .live_info_img {
        width: 100px;
    }

    .info_content {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;
    }

    .title_content {
        font-size: medium;
        font-weight: bold;
    }

    .shijian_content {
        font-size: medium;
    }

    .yaoyuejihua_label {
        font-size: medium;
        font-weight: bold;
        margin-bottom: 20px;
        margin-top: 20px;
    }


    .live_content {
        display: flex;
        flex-direction: column;
    }





    .biaoqian_content {
        display: flex;
        width: 100%;
    }

    .biaoqian_content2 {
        display: flex;
        width: 100%;
    }

    .biaoqian_left_content {
        margin: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(241, 241, 241);
        display: flex;
        flex-direction: column;
        width: 60%;
        overflow-y: scroll;
        /* 启用垂直滚动 */
        max-height: 500px;
        overflow: auto;
        /* 隐藏滚动条 */
        padding: 20px;
    }

    .biaoqian_right_content {
        margin: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(180, 180, 180);
        display: flex;
        flex-direction: column;
        width: 30%;
        overflow-y: scroll;
        /* 启用垂直滚动 */
        max-height: 500px;
        overflow: auto;
        /* 隐藏滚动条 */
        padding: 20px;
    }

    .biaoqian_right_content2 {
        margin: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(180, 180, 180);
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow-y: scroll;
        /* 启用垂直滚动 */
        max-height: 500px;
        overflow: auto;
        /* 隐藏滚动条 */
        padding: 20px;
    }

    .biaoqian_left_content_title {
        display: flex;
    }

    .biaoqian_left_content_content_item_title {
        font-weight: bold;
    }

    .biaoqian_left_content_content {
        display: flex;
        flex-direction: column;
    }

    .biaoqian_left_content_content_item {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .biaoqian_left_content_content_item_content2 {
        display: flex;
        margin-bottom: 10px;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .biaoqian_left_content_content_item_content {
        display: flex;
        padding: 2px;
        margin-left: 10px;
        margin-left: 10px;
    }

    .biaoqian_left_content_content_item_content_title {
        border-color: #dfdfdf;
        border-width: 1px;
        border-style: solid;
        margin: 5px;
        padding: 5px;
        border-radius: 5px;
    }

    .biaoqian_left_content_content_item_content_title2 {
        border-color: blue;
        border-width: 1px;
        border-style: solid;
        margin: 5px;
        padding: 5px;
        border-radius: 5px;
    }

    .biaoqian_right_content_item_top {
        margin-top: 10px;
        margin-bottom: 10px;
        color: red;
    }

    .biaoqian_right_content_item_top2 {
        margin-top: 2px;
        margin-bottom: 10px;
        color: red;
    }

    .biaoqian_right_content_item {
        display: flex;
        flex-direction: column
    }

    .biaoqian_right_content_item_contnet {
        display: flex;
        margin-bottom: 10px;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin-top: 10px;
    }

    .biaoqian_right_content_label {
        border-color: rgb(245, 247, 251);
        border-width: 1px;
        border-style: solid;
    }

    .demonstration {
        width: 100px;
    }

    .renyuan_content {
        display: flex;
        width: 100%;
    }

    .yaoyue_neirong_content {
        display: flex;
    }


    .yaoyue_neirong_content_body {
        display: flex;
        flex-direction: column;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(180, 180, 180);
        padding: 10px;
        margin-left: 10px;
        width: 90%;
    }

    .yaoyue_neirong_content_title {
        width: 10%;
    }

    .yaoyue_neirong_content {
        width: 80%;
    }
</style>